<template>
    <div class="zhuce_box">
        <div class="zhuce_con">
            <h5>注册页面</h5>
            账号: <el-input v-model="username" placeholder=" 请输入账号 " /><br>
            密码:<el-input class="pwd" v-model="passworda" type="password" placeholder="请输入密码" show-password /><br>
            确认密码:<el-input class="queren" v-model="passwordb" type="password" placeholder="请再次输入密码" show-password /><br>
            <el-button class="zhuce" @click="submitZhuce" type="primary">确认注册</el-button>
        </div>
    </div>
</template>


<script>
import { defineComponent } from "vue";
//注册请求
import { ZhuceList } from "@/api/login";

import { useRouter } from "vue-router";
const router = useRouter();
export default defineComponent({
    data() {
        return {
            username: "",
            passworda: "",
            passwordb: "",
            router,
        };
    },
    methods: {
        submitZhuce() {
            // 1 非空校验
            if (this.passworda === "" || this.passwordb === "") {
                return ElMessage.error("密码框不能为空");
            }
            // 2 规则校验
            if (!/^\w{3,8}$/.test(this.username)) {
                return ElMessage.error("用户名不符合规则");
            }
            if (this.passworda !== this.passwordb) {
                return ElMessage.error("前后密码不一致");
            }

            if (!/^\d{6,6}$/.test(this.passworda)) {
                return ElMessage.error("密码不符合规则");
            } else {
                ElMessage.success("恭喜你注册成功,快登录吧!");
                this.$router.push("/login");
            }

            // ZhuceList(
            //   {
            //     username: this.username,
            //     passworda: this.passworda,
            //     passwordb: this.passwordb,
            //   }.then((res) => {})
            // );
            // if (!/^\d{6,6}$/.test(this.passwordb)) {
            //   return ElMessage.error("密码不符合规则");
            // }
            // 2 规则校验
            // if (!/^\w{3,8}$/.test(this.input)) {
            //   return ElMessage.error("密码不符合规则");
            // }
            // if (!/^\d{4,8}$/.test(this.password)) {
            //   return ElMessage.error("密码不符合规则");
            // }
        },
    },
});
</script>




<style lang="scss" scoped>
.zhuce_box {
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url(src/img/denglu.jpeg);
    background-size: 100%, 100%;

    .zhuce_con {
        background-color: bisque;
        border-radius: 15px;
        width: 450px;
        height: 320px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 15px;
        text-align: center;

        .el-input {
            width: 300px;
        }

        .queren {
            width: 273px;
        }

        .zhuce {
            margin-top: 20px;
        }

        h5 {
            text-align: center;
        }

        .pwd {
            margin: 30px 0;
        }

        .el-button {
            width: 70%;
        }
    }
}
</style>

